import React from 'react';
import {Component} from 'react';
import Table from 'uxcore-table';
import './FgjgDialog.less';

export default class FgjgDialog extends Component {

  constructor(props) {
    super(props);
  }

  handlePagerChange(current, pageSize) {
    const { onPageChange } = this.props;
    if (onPageChange) {
      onPageChange(current, pageSize);
    }
  }

  render() {
    const {
      data: {
        // 机构总数
        totalCount,
        // 办理完毕
        blwbCount,
        // 复工率
        fgl,
        // 填报中
        tbzCount,
        // 待审核
        dshCount,
        // 审核退回
        shthCount,
        jsxdata,
        pageSize,
      }
    } = this.props;
    return (
      <div className="fgjg-dialog-content">
        <div className="fgjg-dialog-top-data">
          <div className="fgjg-dialog-containerBg">
            <div className="fgjg-dialog-container fgjg-dialog-zjgc-container">
              <div className="fgjg-dialog-cardLeft">
                申请总数
              </div>
              <div className="fgjg-dialog-cardRight">
                {totalCount}
              </div>
            </div>
            <div className="fgjg-dialog-container fgjg-dialog-blwb-container">
              <div className="fgjg-dialog-cardLeft">
                办理完毕
              </div>
              <div className="fgjg-dialog-cardRight">
                {blwbCount}
              </div>
            </div>
            <div className="fgjg-dialog-container fgjg-dialog-fgl-container">
              <div className="fgjg-dialog-cardLeft">
                复工率
              </div>
              <div className="fgjg-dialog-cardRight">
                <div>
                  {fgl}
                  <span className="fgjg-dialog-percent">%</span>
                </div>
              </div>
            </div>
          </div>
          <div className="fgjg-dialog-containerBg">
            <div className="fgjg-dialog-containerBottom">
              <div className="fgjg-dialog-cardLeft-bottom">填报中</div>
              <div className="fgjg-dialog-cardBottomRight">
                <span className="fgjg-dialog-bottomNumber">{tbzCount}</span>
              </div>
            </div>
            <div className="fgjg-dialog-containerBottom">
              <div className="fgjg-dialog-cardLeft-bottom ">待审核</div>
              <div className="fgjg-dialog-cardBottomRight">
                <span className="fgjg-dialog-bottomNumber">{dshCount}</span>
              </div>
            </div>
            <div className="fgjg-dialog-containerBottom">
              <div className="fgjg-dialog-cardLeft-bottom">审核退回</div>
              <div className="fgjg-dialog-cardBottomRight">
                <span className="fgjg-dialog-bottomNumber">{shthCount}</span>
              </div>
            </div>
          </div>
        </div>
        <div className="fgjg-dialog-table">
          <div style={{height: '50px', lineHeight: '50px', fontSize: 18}}>
            复工列表
          </div>
          <Table
            height={350}
            showPager
            showHeaderBorder
            pageSize={pageSize}
            showPagerTotal
            showColumnPicker={false}
            className='kuma-uxtable-split-line'
            jsxcolumns={[
              {
                dataKey: 'coding', title: '复工编号', width: 120,
              },
              {
                dataKey: 'shsj', title: '审核时间', width: 200,
                render: (shsj, item) => (!shsj ? '-' : shsj)
              },
              {
                dataKey: 'organname', title: '企业名称', width: 200,
              },
              {
                dataKey: 'zzjgdm', title: '组织机构代码', width: 200,
              },
              {
                dataKey: 'address', title: '企业地址', width: 200,
              },
              {
                dataKey: 'frName', title: '法人', width: 100,
              },
              {
                dataKey: 'frPhone', title: '联系电话', width: 100,
              },
            ]}
            jsxdata={jsxdata}
            onPagerChange={(current, pageSize) => {this.handlePagerChange(current, pageSize)}}
          />
        </div>
      </div>
    );
  }
}
